import React, { Component } from "react";
import {
    Button,
    DatePicker,
    Table,
    Tag,
    Switch,
    Form,
    Input,
    Modal,
    Select,
    message
} from "antd"
import datamobx from "*/mobx/data"
import { observer } from "mobx-react"
import { axios } from "&/axios"
import moment from "moment"
moment.locale("zh-cn");
const { RangePicker } = DatePicker;
const { Option } = Select;
@observer
class Outin extends Component {
    state = {
        visible: false,
        item: null,
        columns: [
            {
                title: "序号",
                render: (text, recode, index) => {
                    return index + 1;
                }
            },
            {
                title: "进出人员",
                render: (text) => {
                    return <Tag color="success" >{text.username} </Tag>
                }
            },


            {
                title: '进入时间',
                render: (text) => {
                    return <p>{moment(text.startTime).format('MM/DD, h:mm:ss')}</p>
                }
            },
            {
                title: '离开时间',
                render: (text) => {
                    return <p>{text.endTime ? moment(text.endTime).format('MM/DD, h:mm:ss') : ""}</p>
                }
            },
            {
                title: '操作',
                key: 'x',
                render: (text) => {
                    var users={}
                    if(sessionStorage.users){
                        users=JSON.parse(sessionStorage.users)
                    }
                    return (
                        <div>
                            <Button disabled={text.endTime||text.mobile!=sessionStorage.mobile} type="primary" onClick={() => this.handleSetoutin(text._id)}>进入</Button>
                        </div>
                    );
                }
            }
        ]
    }


    componentDidMount() {
        axios.post("/api/findoutinlist").then(res => {
            if (res.data.type) {
                datamobx.getOutinList(res.data.result)
            }
        })
    }
    handleSetoutin = (_id) => {
        axios.post("/api/handleSetoutin", {
            _id
        }).then(res => {
            datamobx.setOutinList()

        })
    }
    handleAddOutin = () => {
        axios.post("/api/getuserinfo")
            .then(res => {
                var username = JSON.parse(sessionStorage.users).username
                this.refs.outinForm.validateFields()
                    .then(values => {
                        axios.post("/api/addoutinlog", {
                            ...values,
                            username
                        }).then(res => {
                            if (res.data.type) {
                                this.refs.outinForm.resetFields();
                                datamobx.getOutinList(res.data.result)
                            }
                            this.setState({
                                visible: false
                            })
                        }).catch(err => {
                            this.setState({
                                visible: false
                            })
                        })
                    })
            })
    }
    handleChange = (value) => {
    }
    handleonChange=()=>{

    }
    handleonOk=(value)=>{
        if(value[0]){
            var startTime=value[0]._d;
            var endTime = value[1]?value[1]._d:new Date();
            axios.post("/api/findoutinlogtime",{
                startTime,
                endTime
            }).then(res=>{
                datamobx.getOutinList(res.data.result)
            })
        }else{
        //     message.error('请先选择初始时间');
        }
    }
    render() {
        return (
            <div>
                <h2>出入管理</h2>
                <Button type="danger" onClick={() => this.setState({ visible: true })} style={{ marginTop: 20 }}>添加出入记录 </Button>
                <div style={{ marginTop: 20 }}>
                    <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={this.handleonChange}
                        onOk={this.handleonOk}
                    />
                </div>
                <Table
                    dataSource={datamobx.outinlist}
                    columns={this.state.columns}
                    rowKey={
                        (item) => (item._id)
                    }
                    style={{ marginTop: 20 }}
                    pagination={{ pageSize: 6 }}
                >

                </Table>
                <Modal
                    title="添加记录"
                    visible={this.state.visible}
                    onOk={this.handleAddOutin}
                    onCancel={() => this.setState({ visible: false })}
                    okText="确认"
                    cancelText="取消"
                >
                    <Form
                        className="form-box"
                        name="basic"
                        ref="outinForm"

                    >
                        <Form.Item
                            label="出入"
                            name="outin"
                            rules={
                                [
                                    {
                                        required: true,
                                        message: '请选择',
                                    },
                                ]
                            }
                        >
                            <Select
                                style={{ width: 200 }}
                                onChange={(event) => this.handleChange(event)}
                            >

                                <Option
                                    value="出"
                                >
                                    出
                            </Option>
                            </Select>
                        </Form.Item>
                    </Form>



                </Modal>
            </div >
        )
    }
}
export default Outin